<template>
	<view class="home" style="background-color: #fff;padding-bottom: 50px;">
		<view class="img">
			<image mode="scaleToFill" :src="MainList.cover" style="width: 100%;height:350px"></image>
		</view>
		<view class="MainConent">
			<view class="prcie">
				<view class="productPrice">
					报名费用: ¥{{MainList.price}}
				</view>
			</view>
			<view class="Name">
				<view class="Title" style="font-size: 18px;color: #000;">
					活动名称:{{MainList.name}}
				</view>
			</view>
			<view class="Name">
				<view class="Title" style="font-size: 18px;color: #000;">
					活动地址:{{MainList.location}}
				</view>
			</view>
			<view class="Name">
				<view class="Title" style="font-size: 18px;color: #000;">
					活动举行时间: {{MainList.startTime}} / {{MainList.endTime}}
				</view>
			</view>
			<view class="Name">
				<view class="Title" style="font-size: 18px;color: #000;display: flex;align-items: flex-end;color: #0081ff;">
					已报名:(
					<view v-if="MainList.applyNumber">{{MainList.applyNumber}}</view>
					<view v-if="!MainList.applyNumber">0</view>
					/{{MainList.totalNumber}})
				</view>
			</view>
			<view class="Name">
				<view style="font-size: 15px;margin-bottom: 20px;">
					创建者
				</view>
				<view style="display: flex;align-items: center;gap: 10px;">
					<u-avatar :src="user.avatar"></u-avatar>
					{{user.nickName}}
					<view style="margin-left: 50px;">
						创建时间:{{MainList.createTime}}
					</view>
				</view>
			</view>
			<view class="Name" style="margin-top;20px" v-if="Comments.length !=0">
				<view style="font-size: 15px;margin-bottom: 20px;">
					评论:
				</view>
				<view v-for="item in Comments" style="display: flex;margin-bottom: 20px;gap: 8px;">
					<u-avatar :src="item.avatar"></u-avatar>
					<view style="font-size: 13px;display: flex;    flex-direction: column;justify-content: space-between;">
						<view>
							<u-rate :count="5" v-model="item.score" :disabled="true"></u-rate>   {{ item.nickName }}  {{ item.commentTime}}
						</view>
						<view style="font-size: 16px;color: #000;">
							{{item.comment}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;left: 0;bottom: 0;background-color: #fff;width: 100%;height: 40px;padding:4px;z-index: 10;">
			<view style="display: flex;flex-direction: row-reverse;">
				<view style="margin-right: 20px;width: 90%;">
					<u-button :ripple="true" size="medium" shape="circle" type="primary" @click="save">活动报名</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMainAct,getCommentAct,getActivityUser } from '../../../api/Acitvity/Api';
	export default{
		data(){
			return{
				id:'',
				MainList:{},
				Comments:[],
				user:{}
			}
		},
		methods:{
			GetNowList(){
				getMainAct(this.id).then(res => {
					this.MainList = res.data
				})
			},
			GetComment(){
				getCommentAct(this.id).then(res => {
					this.Comments = res.data
				})
			},
			GetUserName(){
				getActivityUser(this.id).then(res => {
					this.user = res.data
				})
			}
		},
		onLoad(options){
			this.id = options.id;
			this.GetNowList();
			this.GetComment();
			this.GetUserName();
		}
	}
</script>

<style>
	.home{
		padding: 0 10px;
	}
	/deep/.u-size-medium{
		width: 100%;
	}
	.img{
		padding: 10px 0;
	}
	.MainConent{
		display: flex;
		flex-direction: column;
		gap:10px;
	}
	.prcie{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.productPrice{
		font-size: 20px;
		color: red;
	}
	
	.buy{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.slot-content {
		display: flex;
		font-size: 14px;
		margin: 20px;
		gap: 10px;
		align-items: center;
	}
</style>